<template>
  <div>
    <!-- 顶部导航 -->

    <van-nav-bar class="topNaV" @click-left="onClickLeft" fixed z-index="3">
      <template #title>
        <p class="title">品牌制造商</p>
      </template>
      <template #left>
        <van-icon name="arrow-left" color="#666666" />
        <p class="left">返回</p>
      </template>
    </van-nav-bar>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        class="brand-list"
        @click="goDetail(item.id)"
      >
        <img :src="item.app_list_pic_url" alt="" class="brand-img" />
        <div class="brand-desc"></div>
        <div class="brand-name">{{ item.name }} | {{ item.floor_price }}起</div>
      </van-cell>
    </van-list>
  </div>
</template>
<script setup>
import { brand } from '@/api/index.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const start = ref(0)
const router = useRouter()
const onLoad = () => {
  start.value++
  brand({ page: start.value }).then(res => {
    list.value.push(...res.data)
    loading.value = false
    if (start.value >= res.total) {
      finished.value = true
    }
  })
}
const onClickLeft = () => {
  router.back()
}
const goDetail = (id) => {
  router.push({ name: 'brandDetail', params: { id: id } })
}
</script>
<script>
export default {
  name: 'brandView'
}
</script>

<style scoped lang="scss">
.brand-list {
  padding: 0;
  width: 710px;
  margin: 20px auto 0;
  position: relative;
}
.brand-img {
  width: 710px;
  height: 400px;
}
.brand-desc {
  position: absolute;
  opacity: 0.1;
  background: #000000;
  width: 710px;
  height: 120px;
  top: 280px;
  z-index: 1;
}
.brand-name {
  width: 710px;
  position: absolute;
  height: 45px;
  line-height: 45px;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0;
  font-weight: 500;
  text-align: center;
  z-index: 2;
  top: 320px;
  left: 50%;
  transform: translateX(-50%);
}
.topNav {
  background-color: #fff;

  .left {
    font-size: 31.2px;
    color: #666666;
    letter-spacing: 0;
    font-weight: 400;
  }

  .title {
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
}
</style>
